<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
    <title>Student Website</title>
</head>

<body>
<div class="navbar">
    <span class="title"><a href="/" style="text-decoration: none; color: black">Back To Main Page</a></span>
</div>
<a onclick="window.history.go(-1)">Back</a>
<div class="card">
    <h2>Course Content</h2>
    <div class="card1">
        <h3>Course Documents:</h3>
        <br>
        <ul id="course_file_list"></ul>
    </div>
    <div class="card1">
        <h3>Course Content:</h3>
        <div id="content"></div>

    </div>

    <div class="card1">
        <h3>New course Content</h3>
        <form id="new-post-form">
            <p>Lecture Name:</p>
            <input class="input" id="ip_lec_name">
            <textarea class="input" type="text" id="course_content"
                      placeholder="Content"></textarea><br>
            <input type="file" id="fileInput" accept=".docx, .pdf" style="margin-top: 10px;">
            <br>
            <br>

            <button class="button" style="margin-top: 10px;" onclick="submit()">Submit</button>
        </form>
    </div>
</div>
<script>
    const add_new_class_button = document.getElementById("add_new_class");
    const urlParams = new URLSearchParams(window.location.search);
    const courseId = urlParams.get('courseId');

    fetch(`/api/getContent?courseId=${courseId}`)
        .then(response => response.json())
        .then(data => {
            const contentDiv = document.getElementById('content');
            contentDiv.innerHTML = '';

            if (data.error) {
                contentDiv.innerHTML = `<p>Error: ${data.error}</p>`;
            } else {
                data.forEach(content => {
                    console.log(content);
                    const contentElement = document.createElement('div');
                    contentElement.innerHTML = `
                    <p>Lecture Name: ${content.lec_name}</p>
                    <p>Lecture Info: ${content.courseInfo}</p>
                    <p>Lecture Time: ${content.createTime}</p>
                    <button class="button" data-id="${content.Lec_Id}" onclick="deleteLec(${content.Lec_Id})">Delete</button>
                    <hr>
                `;
                    contentDiv.appendChild(contentElement);
                });
            }
        })
        .catch(error => {
            console.error('Error fetching data:', error);
            document.getElementById('content').innerHTML = `<p>Error fetching data: ${error}</p>`;
        });

    function submit() {
        const name = document.getElementById("ip_lec_name").value
        const info = document.getElementById("course_content").value
        const fileInput = document.getElementById('fileInput');
        const file = fileInput.files[0];

        const formData = new FormData();
        formData.append('info', info)
        formData.append('file', file);
        formData.append('courseId', courseId)
        formData.append('name', name)
        console.log(formData.get('courseId'))
        fetch('/api/publish_cour_content', {
            method: 'POST',
            body: formData
        })
            .then(response => {
                if (response.status == 400) {
                    alert("You've already submitted");
                    location.reload();
                } else if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                console.log('Success:', data);
                location.reload();
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }

    fetch('/api/getContent')
    fetch('/api/course_files_list')
        .then(response => response.json())
        .then(files => {
            const fileListElement = document.getElementById('course_file_list');
            // 循环文件列表，创建列表项和下载链接
            files.forEach(file => {
                const listItem = document.createElement('li');
                const downloadLink = document.createElement('a');
                downloadLink.href = file.download_link;
                downloadLink.textContent = file.file_name;
                downloadLink.setAttribute('download', file.file_name);
                listItem.appendChild(downloadLink);
                fileListElement.appendChild(listItem);
            });
        })
        .catch(error => {
            console.error('获取文件列表失败:', error);
        });

    function deleteLec(contentId) {
        fetch(`/api/deleteContent/${contentId}`, {method: 'DELETE'})
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                location.reload();
            })
            .catch(error => {
                console.error('Error deleting content:', error);
                alert('Failed to delete the content. Please try again.');
            });
    }
</script>
</body>
<style>
    /* 卡片基础样式 */
    .card1 {
        background-color: #F9F2E0;
        border-radius: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 90%; /* 根据需要调整宽度 */
        margin: 20px auto; /* 居中显示 */
    }

    /* 卡片标题 */
    .card h2 {
        color: #333;
        margin-top: 0;
        margin-bottom: 16px;
        font-size: 24px;
    }

    /* 输入框和文本区域的基础样式 */
    .card .input {
        width: 80%;
        padding: 12px 16px;
        margin-bottom: 16px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    /* 自定义文本区域的高度 */
    .card textarea.input {
        min-height: 100px; /* 可根据需要调整高度 */
    }

    .buttonShort {
        width: 80px; /* 或者任意你希望的宽度 */
    }

</style>
</html>